(OPTIONAL) One Perk of Using Atom — Previewing HTML

Normally, you’ll be writing code in a text editor, saving it as an HTML file, and opening that file in a browser to view the rendered web page. One convenience with using Atom as a text editor is that you can write your HTML code and also preview the web page right inside the editor as you make changes. You can split your window to see both views simultaneously, as shown below.

On the left, we see our HTML code, and on the right, we see a preview of the web page.

We'll show several code examples in this fashion throughout the rest of the lesson.

Installing the atom-html-preview package

If you’d like to set up your Atom workspace this way, you can go through the following steps to install what’s called the atom-html-preview package. Otherwise, feel free to skip these instructions and just use your browser to view your HTML documents.

On Mac:

First, you’ll need to install the package:

1. Open Atom. In the menu bar along the top of the window, select Atom → Preferences.
2. Select Install.
3. In the search field, type atom-html-preview, and hit the RETURN key on your keyboard. You should see the package appear with an option to Install it.
4. Click Install.
5. Once the package installation is complete, exit Preferences.

To see a preview of your HTML, follow these steps:

1. Open your HTML file.
2. Preview your HTML by typing on the keyboard: control + shift + H

You should now see your screen split into left and right panes, with the HTML preview displayed on the right.

Note that, in general, you can split your screen into panes by going to the menu bar, selecting View → Panes, and choosing, for example, Split Right. Once you’ve split your screen, you can hover over the divider, click, and drag to adjust the pane width.

On Windows:

First, you’ll need to install the package:

1. Open Atom. In the menu bar along the top of the window, select File → Settings. (Note: If you don’t see a menu bar for some reason, hit the alt key on your keyboard to make it visible.)
2. Select Install.
3. In the search field, type atom-html-preview, and hit ENTER. You should see the package appear with an option to Install it.
4. Click Install.
5. Once the package installation is complete, exit Settings.

To see a preview of your HTML, follow these steps:

1. Open your HTML file.
2. Preview your HTML by typing on the keyboard: Ctrl + Shift + H

You should now see your screen split into left and right panes, with the HTML preview displayed on the right.

Note that, in general, you can split your screen into panes by going to the menu bar, selecting View → Panes, and choosing, for example, Split Right. Once you’ve split your screen, you can hover over the divider, click, and drag to adjust the pane width.